<template>
  <div class="branch-card">
    <div
      v-if="content.header || content.title"
      class="branch-body branch-bubble"
    >
      <Icon :src="iconQuestion" class="branch-title-icon"/>
      {{ content.header || content.title }}
  </div>
    <div
      v-if="!isSelected"
      v-for="(item, index) in content.items"
      :key="index"
      class="branch-body branch-bubble branch-item"
      :style="{ borderWidth: content.header ? '1px 0 0px 0' : '' }"
      @click="handleContentListItemClick(item)"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script lang="ts">
import vue from '../adapter-vue';
import { customerServicePayloadType } from '../interface';
import iconRight from '../assets/iconRight.svg';
import iconQuestion from '../assets/icon_question.png'
import Icon from './customer-icon.vue';
const { computed, ref} = vue;
// const { computed,ref } = vue;

interface Props {
  payload: customerServicePayloadType;
}

interface branchItem {
  content: string;
  desc: string;
}

export default {
  components: {
    Icon,
  },
  props: {
    payload: {
      type: Object as () => customerServicePayloadType,
      default: () => ({}),
    },
  },
  emits: ['sendMessage'],
  setup(props: Props, { emit }) {
    const isSelected = ref<boolean>(false);
    const content = computed(() => {
      return (
        props?.payload?.content || {
          header: undefined,
          items: [],
        }
      );
    });

    const handleContentListItemClick = (branch: branchItem) => {
      isSelected.value = true;
      emit('sendMessage', { text: branch.content });
    };

    return {
      content,
      handleContentListItemClick,
      iconRight,
      iconQuestion,
      isSelected,
    };
  },
};
</script>

<style lang="scss">
.branch-body {
  display: flex;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 14px;
  color: #000;
  letter-spacing: 0;
  word-wrap: break-word;
  word-break: break-all;
  position: relative;

  .branch-main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-content: flex-start;
    border: 0 solid black;
    margin: 0;
    padding: 0;
    min-width: 0;
  }
}
.branch-bubble {
  background: #f3f4f7;
  border-radius: 0 10px 10px;
  margin-bottom: 8px;
}
.branch-item {
  color:#1c66e5;
  cursor: pointer;
}
.branch-card {
  min-width: 250px;
  max-width: 350px;
  display:flex;
  flex-direction:column;
  align-items: flex-start;
}
</style>
